<template>
  <div class="main-box">
    <!-- 一级分类 -->
    <el-card>
      <el-radio-group @change="changeClassify" v-model="classify" size="small">
        <el-radio
          v-for="(item, idx) in classifyList"
          :key="idx"
          :label="item.type"
          border
          >{{ item.title }}</el-radio
        >
      </el-radio-group>
    </el-card>
    <!-- 二级分类 -->
    <el-card v-if="classify">
      <el-radio-group
        @change="changeClassifyTow"
        v-model="classifytow"
        size="small"
      >
        <el-radio
          v-for="(item, idx) in classifytowList"
          :key="idx"
          :label="item.towtype"
          border
          >{{ item.title }}</el-radio
        >
      </el-radio-group>
    </el-card>

    <!--  列表页面 -->
    <el-card class="list-card">
      <div v-for="(item, idx) in list" :key="idx" class="list-card-item" @click="toDetail(item.id)">
        <h1>{{ item.title }}</h1>
        <div class="list-item">
          <img class="list-img" :src="item.img" alt="" />
          <div class="list-info">
            <p>{{ item.info }}</p>
            <el-tag>{{ classifyEnum[item.classify] }}</el-tag>
            <el-tag type="success">{{
              classifytowEnum[item.classifytow]
            }}</el-tag>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { apigetClassify, apigetClassifyTow, apigetList } from "@/api";
import { classifyEnum, classifytowEnum } from "@/enum";
export default {
  data() {
    return {
      classifytowEnum,
      classifyEnum,
      classify: "",
      classifyList: [],
      classifytow: "",
      classifytowList: [],
      list: [],
    };
  },
  created() {
    // 一级分类
    this.getClassify();
    // 获取列表数据
    this.getList();
  },
  methods: {
    getClassify() {
      apigetClassify().then((res) => {
        this.classifyList = res.data;
      });
    },

    // 一级分类改变的时候
    changeClassify() {
      // 清空二级分类
      this.classifytow = "";
      // 获取二级分类
      apigetClassifyTow({ type: this.classify }).then((res) => {
        this.classifytowList = res.data;
      });

      // 重新获取数据
      this.getList();
    },

    // 二级分类改变的时候
    changeClassifyTow() {
      // 重新获取数据
      this.getList();
    },

    // 获取列表
    getList() {
      apigetList({
        classify: this.classify,
        classifytow: this.classifytow,
      }).then((res) => {
        this.list = res.data;
      });
    },
    // 跳转详细
    toDetail(id) {
      this.$router.push(`/detail/${id}`)
    }
  },
};
</script>

<style lang="scss" scoped>
.main-box {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}

.list-card {
  margin-top: 20px;
}
.list-item {
  display: flex;
}
.list-info {
  padding-left: 20px;
}

.list-card-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.list-img {
  width: 100px;
  height: 100px;
}
</style>